<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: #f00;
				position: absolute;
				top: 300px;
				left: 400px;
			}
			
		</style>
		<script src="jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div></div>
		<script>
			$(document).keydown(function(e){
				var top=parseInt($("div").css("top"));
				// mmmm . var down=parseInt($("div").css("down"));
				var left=parseInt($("div").css("left"));
				// var right=parseInt($("div").css("right"));
				if(e.key=="ArrowUp"){
					top=top-5;
					$("div").css("top",top+"px")
				}
				if(e.key=="ArrowDown"){
					top=top+5;
					$("div").css("down",top+"px")
				}
					if(e.key=="ArrowLeft"){
					top=top-5;
					$("div").css("left",top+"px")
				}
					if(e.key=="ArrowRight"){
					top=top+5;
					$("div").css("right",top+"px")
				}
			})
		</script>
	</body>
</html>
